<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-20 17:25:21
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-29 14:08:41
-->
<template>
  <div class="swtich-org-container">
    <div @click="handleShowOptions()" class="swtich-org">
      <div class="org-title">
        <!-- <img src="../../../common/assets/images/org.png" alt="" /> -->
        <em class="iconfont icon-Vector"></em>
        <span>{{ checkName || $t('organization.dept.clickSwitchOrg') }}</span>
      </div>
      <em class="el-icon-caret-bottom"></em>
    </div>
    <x-select-tree
      ref="selecTree"
      class="visble-select"
      v-model="checkVal"
      :node-key="'value'"
      :options="options"
      :defaultProps="defaultProps"
      :placeholder="$t('system.user.pleaseSelect')"
    />
  </div>
</template>
<script>
  export default {
    props: {
      options: {
        type: Array,
        default: () => []
      },
      defaultProps: {
        type: Object,
        default: () => {
          return { children: 'children', label: 'label', value: 'value' }
        }
      },
      currentOrg: {
        type: Object
      }
    },
    data() {
      return {
        checkVal: '',
        checkName: ''
      }
    },
    watch: {
      currentOrg: {
        handler(val) {
          if (val && val.value !== this.checkVal) {
            this.checkVal = val.value
            this.checkName = val.label
          }
        },
        immediate: true,
        deep: true
      },
      checkVal: {
        handler(val, oldVal) {
          if (val && val !== oldVal && this.$refs.selecTree?.selectName) {
            const result = this.$refs.selecTree.selectName
            this.checkName = result || this.checkName
            this.$emit('handleResetOrg', { label: this.checkName, value: this.checkVal })
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleShowOptions() {
        this.$refs.selecTree.handleSelectFocus()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .swtich-org-container {
    position: relative;
    box-sizing: border-box;
    margin: 6px 0;
    border-radius: 3px;

    // &:active {
    //   background-color: rgba(126, 134, 142, 0.12);
    // }

    .swtich-org {
      font-size: 15px;
      position: absolute;
      top: 0;
      // left: 5px;
      display: flex;
      justify-content: space-between;
      width: 95%;
      color: #333;
      height: 32px;
      align-items: center;
      padding: 0 6px;

      &:hover,
      :focus,
      :active,
      :visited {
        background-color: rgba(126, 134, 142, 0.12);
      }
      .org-title {
        flex: 3;
        display: flex;
        align-items: center;
        span {
          padding-left: 3px;
        }
      }

      img {
        width: 20px;
        height: 20px;
        border-radius: 3px;
      }

      em {
        // line-height: 36px;
      }
    }

    .visble-select {
      visibility: hidden;
    }
  }
</style>
